<template>
    <div>
        <el-table
         :data="tableData.slice((currentPage-1)*PageSize,currentPage*PageSize)" 
         style="width:100%" 
         stripe>
            <el-table-column
              label="日期"
              width="180">
               <template slot-scope="scope">
                 <i class="el-icon-time"></i>
                 <span style="margin-left: 10px">{{ scope.row.date }}</span>
               </template>
            </el-table-column>
            <el-table-column 
            prop="id" 
            label="商品id" 
            width="180">                        
            </el-table-column>
            <el-table-column 
            prop="name" 
            label="商品名" 
            width="180">
            </el-table-column>
            <el-table-column 
            prop="price" 
            label="价格" 
            width="180">
            </el-table-column>
            <el-table-column 
            prop="num" 
            label="数量" 
            width="180">
            </el-table-column>
            <el-table-column
              align="right">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
        </el-table>
        <div class="block">
        <span class="demonstration"></span>
        <el-pagination
         @size-change="handleSizeChange"
         @current-change="handleCurrentChange"
         :current-page="currentPage"
         :page-sizes="[1,5,15]"
         :page-size="PageSize"
         layout="total,jumper,prev, pager, next,sizes"
         :total="total">
        </el-pagination>
</div>
  </div>
</template>
<script>


export default{
    data() {
      return {
          total:14,
          currentPage:1,
          pageSizes:[1,5,10],
          PageSize:5,
          tableData:[{
              date: '2022-03-02',
              id:"1122",
              name:"拍立得",
              price:6,
              num:10
          },{
              date: '2022-03-04',
              id:"1122",
              name:"拍立得",
              price:6,
              num:10  
          },{
              date: '2022-03-01',
              id:"1122",
              name:"拍立得",
              price:6,
              num:10  
          },{
              date: '2022-03-01',
              id:"1122",
              name:"拍立得",
              price:6,
              num:10  
          },{
              date: '2019-03-03',
              id:"1122",
              name:"拍立得",
              price:6,
              num:10  
          },{
              date: '2019-03-03',
              id:"2122",
              name:"拍立得",
              price:6,
              num:10  
          },{
              date: '2019-03-03',
              id:"2122",
              name:"拍立得",
              price:6,
              num:10  
          },{
              date: '2019-03-03',
              id:"2122",
              name:"拍立得",
              price:6,
              num:10  
          },{
              date: '2019-03-03',
              id:"2122",
              name:"拍立得",
              price:6,
              num:10  
          },{
              date: '2001-04-09',
              id:"2122",
              name:"拍立得",
              price:6,
              num:10  
          },{
              date: '2019-03-03',
              id:"3122",
              name:"拍立得",
              price:6,
              num:10  
          },{
              date: '2019-03-03',
              id:"3122",
              name:"拍立得",
              price:6,
              num:10  
          },{
              date: '2019-03-03',
              id:"3122",
              name:"拍立得",
              price:6,
              num:10  
          },{
              date: '2019-03-03',
              id:"3122",
              name:"拍立得",
              price:6,
              num:10  
          }]
      }
      },
    methods:{        
        handleSizeChange(val){
            this.PageSize = val;
            this.currentPage = 1;
        },
        handleCurrentChange(val){
            this.currentPage = val;
        },
        handleEdit(index,row){
            console.log("第" + this.currentPage + "页");
            console.log(index, row);
        },
        handleDelete(index, row) {
            console.log("第" + this.currentPage + "页");
            console.log(index, row);
        }
    }
    }
</script>
<style scoped>

</style>
